<template>
    <div class="mall-layout-header">
        <div class="topleft">
            <div class="logo">
                <img style="width: 100%;height: 100%;" src="../../assets/img/zpw01.png" alt="">
            </div>
            <div class="title">
                <div :class="active=='0'?'active':'item-box'" @click="goNext('home')">首页</div>
                <!-- <div :class="active=='1'?'active':'item-box'">云仓合作</div> -->
                <div :class="active=='2'?'active':'item-box'" @click="goNext('service')">产品服务</div>
                <div :class="active=='3'?'active':'item-box'" @click="goNext('cooperate')">实体店合作</div>
                <!-- <div class="item-box">文档中心</div> -->
                <div :class="active=='5'?'active':'item-box'" @click="goNext('about')">关于我们</div>
            </div>
        </div>
        <div class="topright">
            <div class="btn-box">关于我们</div>
            <div class="text">登录/注册</div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            active: {
                type: Number,
            }
        },
        name: 'websitetop',
        data() {
            return {}
        },
        created() {},
        methods: {
            goNext(url) {
                this.$router.push(url)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .active {
        color: #2B2F79;
        margin-left: 50px;
        font-family: Source Han Sans CN;
        font-weight: 700;
        cursor: pointer;
    }
    
    .mall-layout-header {
        height: 60px;
        margin: 0 230px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 21px;
        min-width: 1280px;
    }
    
    .topleft {
        display: flex;
        align-items: center;
    }
    
    .logo {
        width: 100px;
        height: 38px;
        /* border: 1px solid #ccc; */
    }
    
    .title {
        display: flex;
        flex: 1;
    }
    
    .item-box {
        margin-left: 50px;
        font-family: Source Han Sans CN;
        font-weight: 700;
        color: #1F1F1F;
        cursor: pointer;
    }
    
    .topright {
        display: flex;
        align-items: center;
    }
    
    .btn-box {
        width: 176px;
        height: 42px;
        background: #2B2F79;
        border-radius: 21px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .text {
        color: #1F1F1F;
        font-weight: 700;
        margin-left: 21px;
        cursor: pointer;
    }
</style>